import React, { Component } from "react";
import "./Hdlb.css";
import { Form, Input, Table, Button, Modal, message } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import axios from "axios";

class Hdlb extends Component {
  constructor() {
    super();
    this.state = {
      hdData: [

      ],
      columns: [
        {
          title: "活动id",
          dataIndex: "hdId",
          key: "hdId",
          align: "center",
        },
        {
          title: "活动名称",
          dataIndex: "hdName",
          key: "hdName",
          align: "center",
        },
        {
          title: "开始时间",
          dataIndex: "start",
          key: "start",
          align: "center",
        },
        {
          title: "结束时间",
          dataIndex: "end",
          key: "end",
          align: "center",
        },
        {
          title: "操作人",
          dataIndex: "createUser",
          key: "createUser",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (text, record) => (
            <div>
              <MyButton
                data={record}
                myEdit={this.myEdit}
                myDel={this.myDel}
              ></MyButton>
            </div>
          ),
        },
      ],
    };
  }
  componentDidMount(){
    axios({
      url:'http://123.57.67.148:3000/mock/51/hdlb',
      method:'get'
    }).then(res=>{
    //  console.log(res.data.data)

    this.setState({
     hdData: res.data.data.map((item,index)=>{
       return Object.assign(item,{key:index})
     })
    })
    })
  }

  
  // 编辑
  myEdit = (obj) => {
    let a = [...this.state.hdData];
    for (let i = 0; i < a.length; i++) {
      if (obj.key === a[i].key) {
        a[i] = obj;
      }
    }
    // console.log(a);
    this.setState({
      hdData: a,
    });
  };
  // 删除
  myDel = (obj) => {
    // console.log(obj.key);
      console.log(obj)
    let a = [...this.state.hdData];
    for (let i = 0; i < a.length; i++) {
      if (obj.key === a[i].key) {
        a.splice(i, 1);
      }
    }
    //   console.log(a)
    this.setState({
      hdData: a,
    });
  };
  render() {
    //   const {data} = this.props.hp
    return (
      <Table
        pagination={{ pageSize: 8 }}
        columns={this.state.columns}
        dataSource={this.state.hdData}
        bordered
        title = {()=><div>
          <div style={{ display: 'flex', width: '20%' }}>
            <Input placeholder='请输入活动id' onChange={this.searchTextChange} value={this.state.searchText}/>
            <Button onClick={this.searchBtn}>搜索</Button>
            <Button>重置</Button>
          </div>
        </div>}
      />
    );
  }
}
// const myButtonStyle = {
//   display: "flex",
//   flexDirection: "row",
//   width: "60%",
//   justifyContent: "space-around",
//   margin: "auto",
// };
class MyButton extends Component {
  state = {
    visible: false, //Modal状态
    obj: {},
  };
  // 编辑获得初始值
  handleEditer = (obj) => {
    // console.log(obj);
    this.setState({
      visible: true,
      obj: obj,
    });
  };
  // 表单提交
  handleOk = () => {
    // console.log(this.state.obj);
    message.success("编辑成功");
    this.props.myEdit(this.state.obj);
    this.setState({
      visible: false,
    });
  };
  // 关闭对话框
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };
  onChange = (name, value) => {
    // let a = { ...this.state.obj };
    // a[name] = value;
    let a = Object.assign({}, this.state.obj, { [name]: value });
    // console.log(name, value);
    this.setState({
      obj: a,
    });
  };
  handleChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  };
  // 删除
  confirm = (obj) => {
    Modal.confirm({
      title: "删除",
      icon: <ExclamationCircleOutlined />,
      content: "删除后不可恢复，是否确认删除！",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        message.success("删除成功");
        this.props.myDel(obj);
      },
    });
  };
  render() {
    return (
      <div className="anniu">
        <Button
          onClick={this.handleEditer.bind(this, this.props.data)}
          size="small"
          type="primary"
        >
          编辑
        </Button>
        <Button
          onClick={this.confirm.bind(this, this.props.data)}
          size="small"
          type="danger"
        >
          删除
        </Button>
        
        <Modal
          title="编辑"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this, this.props)}
          onCancel={this.handleCancel}
          okText="确认"
          cancelText="取消"
        >
          <Form
            name="nest-messages"
            // onFinish={onFinish}
          >
            <Form.Item label="活动id">
              <Input
                value={this.state.obj.hdId}
                onChange={this.handleChange("hdId")}
              />
            </Form.Item>
            <Form.Item label="活动名称">
              <Input
                value={this.state.obj.hdName}
                onChange={this.handleChange("hdName")}
              />
            </Form.Item>
            <Form.Item label="开始时间">
              <Input
                value={this.state.obj.start}
                onChange={this.handleChange("start")}
              />
            </Form.Item>
            <Form.Item label="结束时间">
              <Input
                value={this.state.obj.end}
                onChange={this.handleChange("end")}
              />
            </Form.Item>
            <Form.Item label="操作人">
              <Input
                value={this.state.obj.createUser}
                onChange={this.handleChange("createUser")}
              />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default Hdlb;
